<template>
  <div class="mid-box">
    <el-collapse-transition>
      <div v-show="btnGroup.search" class="main-box search-box">
        <el-form
          class="troila-form"
          ref="searchInfo"
          :model="searchObj"
          :inline="true"
          label-width="100px"
        >
          <el-form-item
            label="字典名称"
            prop="dictName"
            class="troila-select-inline"
          >
            <el-input
              v-setwidth
              placeholder="全部"
              v-model="searchObj.dictName"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item
            label="字典状态"
            prop="status"
            class="troila-select-inline"
          >
            <el-select
              v-setwidth
              placeholder="全部"
              v-model="searchObj.status"
              clearable
              popper-class="troila-popper"
            >
              <el-option
                v-for="(item, index) in dictList"
                :key="index"
                :label="item.dictName"
                :value="item.dictCode"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="添加日期" class="troila-select-inline">
            <el-date-picker
              v-model="createTime"
              v-setwidth
              placeholder="全部"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              type="daterange"
              popper-class="troila-popper"
            ></el-date-picker>
          </el-form-item>
          <!-- <el-form-item class="searchBtn">
          </el-form-item> -->
        </el-form>
      </div>
    </el-collapse-transition>
    <!-- <div class="troila-group">
      <select-group
        v-model="btnGroup"
        :row="allTitle"
        :row-choose="chooseTitle"
        @rowChange="
          (arr) => {
            chooseTitle = arr
          }
        "
        @refresh="getList"
      />
    </div> -->
    <div class="main-box table-box">
      <div class="table-box-title ClearFloat">
        <!-- <i class="title-font">查询结果</i> -->
        <div class="troila-form">
          <el-button @click="submitSearch"
            ><unit-icon class="troila-icon" type="search" />查询</el-button
          >
          <el-button @click="resetForm"
            ><unit-icon class="troila-icon" type="refresh" />重置</el-button
          >
          <el-button v-limit="`system:dictManage:add`" @click="btnClick('add')"
            ><unit-icon class="troila-icon" type="addLine" />添加</el-button
          >
          <el-button @click="btnClick('fold')" v-if="showStatus"
            ><unit-icon class="troila-icon" type="change" />展开/折叠</el-button
          >
          <!-- <el-button
            type="primary"
            v-limit="`system:dictManage:add`"
            @click="btnClick('add')"
            >添加</el-button
          >
          <el-button type="primary" @click="btnClick('fold')" v-if="showStatus"
            >展开/折叠</el-button
          > -->
        </div>
      </div>
      <unit-table
        v-if="!btnGroup.card"
        row-key="id"
        children="children"
        :treeFold="treeFold"
        :loading="loading"
        :title="tableTitle"
        :data="tableData"
        :opera="3"
        :operation="tableOperation"
        :dictionary="dictionary"
        @return="tableReturn"
      />
      <pagination
        v-show="pager.total > pager.size"
        :pager="pager"
        @query="getList"
        ref="Pagerpagination"
      ></pagination>
    </div>
    <dialog-dict
      v-model="showDict"
      :treeArr="treeArr"
      @formConfirm="formConfirm"
      ref="dictForm"
    />
  </div>
</template>
<script>
import dialogDict from './dialog/dictForm'
export default {
  name: 'dictManage',
  components: {
    dialogDict,
  },
  data() {
    return {
      createTime: null,
      searchObj: {
        dictName: '',
        status: '',
        dateBegin: '',
        dateEnd: '',
      }, //搜索参数
      searchRes: {}, //搜索储存值
      loading: false,
      time: null, //时间组件值
      btnGroup: {
        //按钮组
        search: true,
        refresh: false,
      },
      pager: {
        // 页码
        total: 0,
        page: 1, //当前第几页
        size: 10, //每页显示的条数
      },
      dictId: '',
      showStatus: true,
      dictionary: {
        // 字典信息
        // dictType: [
        //   { dictName: '目录', dictCode: '1' },
        //   { dictName: '菜单', dictCode: '2' },
        //   { dictName: '字典', dictCode: '3' },
        // ],
        // status: [
        //   { dictName: '正常', dictCode: '1' },
        //   { dictName: '关闭', dictCode: '0' },
        // ],
      },
      allTitle: [
        // 全部可显示表头
        {
          label: '字典名称', //*表头名称
          code: 'dictName', //*对应数据项
          tooltip: true, //超出显示浮层
          sort: false, //是否显示排序
          width: 110, //最小宽
        },
        {
          label: '字典值',
          code: 'dictCode',
        },
        {
          label: '字典类型',
          code: 'dictType',
          dict: 'dictType', //需要查询字典对应的key
        },
        {
          label: '状态',
          code: 'status',
          dict: 'status', //需要查询字典对应的key
          tooltip: true,
          width: 110,
          style: {
            //该项style
            color: { value: '#f54141', result: 0 },
          },
        },
        {
          label: '显示顺序',
          code: 'sort',
          width: 60,
        },
        {
          label: '添加时间',
          code: 'createTime',
          tooltip: true,
          width: 110,
          format: (item, key) => {
            return this.toTime(item[key])
          },
        },
        {
          label: '添加人',
          code: 'createBy',
          tooltip: true,
        },
        {
          label: '修改时间',
          code: 'updateTime',
          tooltip: true,
          width: 110,
          format: (item, key) => {
            return this.toTime(item[key])
          },
        },
        {
          label: '修改人',
          code: 'updateBy',
          tooltip: true,
        },
        {
          label: '备注',
          code: 'remark',
          /* style: {
              //该项style
              color: { value: '#f54141', result: 2 }
          } */
        },
        // {
        //   label: '其他',
        //   code: 'other',
        // },
      ],
      chooseTitle: [
        //被选中显示表头
        'dictName',
        'dictCode',
        'dictType',
        'status',
        'sort',
        // 'remark',
        'createTime',
        'createBy',
      ],
      tableData: [],
      tableOperation: [
        //表格操作
        // *code 对应图标, label 对应浮层显示文字, show 判断是否显示, color 图标颜色
        {
          code: 'add',
          label: '添加',
          limit: 'system:dictManage:add',
          disabled: (item) => {
            return item.dictType == 1
          },
        },
        { code: 'edit', label: '修改', limit: 'system:dictManage:edit' },
        {
          code: 'start',
          label: '启用',
          limit: 'system:dictManage:start',
          show: (row) => {
            return row.status == 0
          },
        },
        {
          code: 'stop',
          label: '禁用',
          limit: 'system:dictManage:stop',
          // color: '#D13633',
          show: (row) => {
            return row.status == 1
          },
        },
        /*  { code: 'delete', color: '#D13633' } */
      ],
      treeFold: true,
      selection: [],
      showDict: false,
      treeArr: [],
    }
  },
  computed: {
    tableTitle() {
      //表格表头
      return this.allTitle.filter(
        (item) => this.chooseTitle.indexOf(item.code) > -1
      )
    },
    dictList() {
      let list = this.$store.state.dictionary.base_status
      this.dictionary.status = list

      let list1 = this.$store.state.dictionary.dict_type
      if (!list1) {
        this.$store.dispatch('dictionary/getDict', 'dict_type')
      }
      this.dictionary.dictType = list1

      return list ? list : []
    },
  },
  methods: {
    // 获取列表
    getList() {
      let param = {
        pageNum: this.pager.page,
        pageSize: this.pager.size,
        ...this.searchRes,
      }
      this.loading = true
      if (param.dictName || param.status) {
        setTimeout(() => {
          this.loading = false
          this.showStatus = false
          this.pager.total = 4
          this.tableData = [{}, {}, {}, {}]
        }, 100)
        return
        this.API.dictManage
          .searchList(param)
          .then((res) => {
            if (res.code == 1) {
              if (res.code === 1) {
                this.loading = false
                this.showStatus = false
                this.pager.total = res.data.total ? res.data.total : 0
                this.tableData = res.data.records
              } else {
                this.loading = false
              }
            }
          })
          .catch((e) => {
            this.loading = false
          })
      } else {
        setTimeout(() => {
          this.loading = false
          this.showStatus = true
          this.pager.total = 4
          this.tableData = [
            { id: 1, children: [{ id: 11 }, { id: 12 }] },
            { id: 2, children: [{ id: 21 }, { id: 22 }] },
            { id: 3, children: [{ id: 31 }, { id: 32 }] },
            { id: 4, children: [{ id: 41 }, { id: 42 }] },
          ]
        }, 100)
        return
        delete param.dictName
        delete param.status
        this.API.dictManage
          .pageList(param)
          .then((res) => {
            if (res.code == 1) {
              if (res.code === 1) {
                this.loading = false
                this.showStatus = true
                this.pager.total = res.data.total ? res.data.total : 0
                this.tableData = res.data.records
              } else {
                this.loading = false
              }
            }
          })
          .catch((e) => {
            this.loading = false
          })
      }
    },
    // 日期控件操作
    changeDate() {
      // console.log(this.time)
    },
    // 重置
    resetForm() {
      // this.searchObj = {}
      this.$refs.searchInfo.resetFields()
      this.searchObj.dateBegin = ''
      this.searchObj.dateEnd = ''
      this.createTime = []
      this.searchRes = {}
      this.pager.page = 1
      this.getList()
    },
    // 搜索
    submitSearch() {
      this.searchRes = {
        ...this.searchObj,
        dateBegin:
          this.createTime && this.createTime.length > 0
            ? this.createTime[0]
            : '',
        dateEnd:
          this.createTime && this.createTime.length > 0
            ? this.createTime[1]
            : '',
      }
      this.pager.page = 1
      this.getList()
    },
    // 按钮操作
    btnClick(method) {
      // console.log(method)
      switch (method) {
        case 'add':
          // this.treeArr=JSON.parse(JSON.stringify(this.tableData))
          this.showDict = { method }
          // console.log(this.showDict)
          this.dictId = ''
          return
        case 'fold':
          this.treeFold = !this.treeFold
          break
      }
    },
    // 表格操作
    tableReturn(method, { row, prop, order, selection }) {
      // console.log(method, row, prop, order, selection)
      let text = ''
      // console.log(row)
      switch (method) {
        case 'add':
          this.showDict = { pid: row.id, method, type: 'add' }
          // console.log(this.showDict)
          this.dictId = ''
          return
        case 'edit':
          this.showDict = { ...row, pid: row.pid, method }
          this.dictId = row.id
          return
        case 'start':
          text = '启用'
          break
        case 'stop':
          text = '禁用'
          break
        case 'delete':
          text = '删除'
          break
        default:
          return
      }
      this.$confirmFn(
        `您确定要${text}<span class='light'>${row.dictName}</span>${
          method == 'start' ? '' : '及其子节点'
        }吗？`,
        '提示',
        {
          callback: (action, instance) => {
            // console.log(method, row)
            if (action == 'cancel ') {
              return
            } else if (action == 'confirm') {
              let postData = {
                dictId: row.id,
                status: method == 'start' ? 1 : 0,
              }
              this.API.dictManage.updateStatus(postData).then((res) => {
                if (res.code == 1) {
                  this.$alertFn.success(`${text}成功`)
                  this.getList()
                  this.$store.dispatch('dictionary/clear')
                } else {
                  this.$alertFn.error(`${text}失败`)
                  this.getList()
                }
              })
            }
          },
        }
      )
    },
    formConfirm(data) {
      this.resetForm()
      this.getTreeArr()
      this.$store.dispatch('dictionary/clear')
    },
    getTreeArr() {
      this.API.dictManage.treeList({}).then((res) => {
        if (res.code == 1) {
          this.treeArr = res.data
        }
      })
    },
  },
  created() {
    this.submitSearch()
  },
  mounted() {
    this.getTreeArr()
  },
  destroyed() {},
}
</script>
<style scoped>
</style>
